<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <title>我的补借条</title>
    <link href="../Content/css/style.css" rel="stylesheet">
    <script src="../Content/js/rem.js"></script>
    <style>
        .dhk-box2 li .pric{
            top: 40%;
        }#list{
            padding-top: 80px;
                 }
    </style>
</head>
<body >
<div id="loading">
    <img src="../Content/imgs/kbloading.gif">
</div>
    <div class="wrap">
        <div class="header1" id="header">
            <div class="header__item active"><p id="sum1">100000.00</p> <span>待确认(<a id="num1">0</a>)</span></div>
            <div class="header__item"><p id="sum2">100.00</p> <span>进行中(<a id="num2">0</a>)</span></div>
            <div class="header__item "><p id="sum3">11.00</p> <span>已完结(<a id="num3">0</a>)</span></div>
        </div>
        <div id="list">
                <div id="box1" class="div1">
                    <!--<div class="tab__item">-->
                        <!--<div class="card nail2">-->
                            <!--<div class="card__header" style="display: block;">-->
                                <!--<div class="loan-money"><p class="loan-money__amount orange">100000.00元</p></div>-->
                                <!--<div class="loan-user-info">-->
                                    <!--<div class="loan-user-info__box"><p class="loan-user-info__name">出借人：</p>-->
                                        <!--<p class="loan-user-info__phone">李莹</p></div>-->
                                    <!--<div class="loan-user-info__box"><p class="loan-user-info__name">借款人：</p>-->
                                        <!--<p class="loan-user-info__phone">靳阳阳</p></div>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<ul class="card__info">-->
                                <!--<li class="card__info-item">借款日期：2017-09-02</li>-->
                                <!--<li class="card__info-item">还款日期：2018-09-02</li>-->
                                <!--<li class="card__info-item full">离还款日还有：-->
                                    <!--<div class="component-count-down"><p class="component-count-down__content">363天</p>-->
                                    <!--</div>-->
                                <!--</li>-->
                            <!--</ul>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>

                <div id="box2" class="div1 dn">
                </div>

                <div id="box3" class="div1 dn">
                </div>
            </div>
    </div>
    <script src="../Content/js/jquery-2.2.4.min.js"></script>
<script>
    //获取页面传递参数
        let urs=window.location.search;
        let strs=urs.substring(1);
        let silp=strs.split('&');
        let res={};
        for (let i=0;i<silp.length;i++){
            res[silp[i].split("=")[0]]=silp[i].split("=")[1];
        }
        var Id=localStorage.id;
        //console.log(res);

    var winH=$(window).height();

    $(".wrap").css("height",winH);

    $.ajax({
        type : "GET",
        url : localStorage.url+"/receipt/getReceipt",
        data :{
            id:Id,
        },
        success : function(ro) {
            console.log(ro);
            $("#sum1").html(Number(ro.sum1).toFixed(2));
            $("#sum2").html(Number(ro.sum2).toFixed(2));
            $("#sum3").html(Number(ro.sum3).toFixed(2));
            $("#num1").html(Number(ro.num1));
            $("#num2").html(Number(ro.num2));
            $("#num3").html(Number(ro.num3));
            var srts1="";
            var srts2="";
            var srts3="";
            $.each(ro.list,function (i,el) {
                if(el.status===1){
                    srts1+=`<div class="tab__item" data-id=`+el.id+` onclick="getJtinfo(this)">
                                <div class="card nail2">
                                    <div class="card__header" style="display: block;">
                                        <div class="loan-money"><p class="loan-money__amount orange">`+Number(el.loan_money).toFixed(2)+`元</p></div>
                                        <div class="loan-user-info">
                                            <div class="loan-user-info__box"><p class="loan-user-info__name">出借人：</p>
                                                <p class="loan-user-info__phone">`+el.luser_name+`</p></div>
                                            <div class="loan-user-info__box"><p class="loan-user-info__name">借款人：</p>
                                                <p class="loan-user-info__phone">`+el.buser_name+`</p></div>
                                        </div>
                                    </div>
                                    <ul class="card__info">
                                        <li class="card__info-item">借款日期：`+el.loan_date+`</li>
                                        <li class="card__info-item">还款日期：`+el.refund_date+`</li>
                                        <li class="card__info-item full">离还款日还有：
                                            <div class="component-count-down"><p class="component-count-down__content">363天</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>`
                }else if(el.status===2){
                    srts2+=`<div class="tab__item" data-id=`+el.id+` onclick="getJtinfo(this)">
                                <div class="card nail2">
                                    <div class="card__header" style="display: block;">
                                        <div class="loan-money"><p class="loan-money__amount orange">`+Number(el.loan_money).toFixed(2)+`元</p></div>
                                        <div class="loan-user-info">
                                            <div class="loan-user-info__box"><p class="loan-user-info__name">出借人：</p>
                                                <p class="loan-user-info__phone">`+el.luser_name+`</p></div>
                                            <div class="loan-user-info__box"><p class="loan-user-info__name">借款人：</p>
                                                <p class="loan-user-info__phone">`+el.buser_name+`</p></div>
                                        </div>
                                    </div>
                                    <ul class="card__info">
                                        <li class="card__info-item">借款日期：`+el.loan_date+`</li>
                                        <li class="card__info-item">还款日期：`+el.refund_date+`</li>
                                        <li class="card__info-item full">离还款日还有：
                                            <div class="component-count-down"><p class="component-count-down__content">363天</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>`
                }else if(el.status===3){
                    srts3+=`<div class="tab__item" data-id=`+el.id+` onclick="getJtinfo(this)">
                                <div class="card nail2">
                                    <div class="card__header" style="display: block;">
                                        <div class="loan-money"><p class="loan-money__amount orange">`+Number(el.loan_money).toFixed(2)+`元</p></div>
                                        <div class="loan-user-info">
                                            <div class="loan-user-info__box"><p class="loan-user-info__name">出借人：</p>
                                                <p class="loan-user-info__phone">`+el.luser_name+`</p></div>
                                            <div class="loan-user-info__box"><p class="loan-user-info__name">借款人：</p>
                                                <p class="loan-user-info__phone">`+el.buser_name+`</p></div>
                                        </div>
                                    </div>
                                    <ul class="card__info">
                                        <li class="card__info-item">借款日期：`+el.loan_date+`</li>
                                        <li class="card__info-item">还款日期：`+el.refund_date+`</li>
                                        <li class="card__info-item full">离还款日还有：
                                            <div class="component-count-down"><p class="component-count-down__content">363天</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>`
                }
                console.log(ro.list[i].status);

            });
            //console.log(srts1)
            $(srts1).appendTo("#box1");
            $(srts2).appendTo("#box2");
            $(srts3).appendTo("#box3");
            $("#loading").hide();
        },
        error : function(err) {
            alert(err);
        }
    });
    $(function(){
        $("#header div").on('click',function () {
            var index=$(this).index();
            console.log(index)
            $(this).addClass("active").siblings().removeClass("active");
            $("#list div.div1").eq(index).show().siblings().hide();
        })
    });
    function getJtinfo(obj) {
        var $this=$(obj);
        var id=$this.attr("data-id");
        window.location.href="bujietiaoInfo.html?id="+id;
    }
</script>
</body>
</html>
